import React, { memo, useEffect } from "react"
import Header from "../../components/home/header/index.tsx"
import CarHeader from "./carHeader.tsx"
import ShoppingCare from "../../components/shoppingCar/shoppingCare.tsx"
import { useAppDispatch, useAppSelector } from "../../redux/index.ts"
import {getShoppingsAsync} from "../../redux/modules/shoppingCarSlice.ts"
const ShoppingCar:React.FC=memo(()=>{
    const disPatch = useAppDispatch()

    // 取得仓库数据
    const shoppings = useAppSelector(state=>state.shoppingcar.shoppings)
    const allPrice = useAppSelector(state=>state.shoppingcar.allPrice)

    // 组件挂载就发送请求获取数据
    useEffect(()=>{
        disPatch(getShoppingsAsync())
    },[disPatch])

    return(
        <main>
            <Header/>
            <CarHeader/>
            <div className="min-h-80 mt-10 py-2.5">
                <ul className="min-h-60">
                    {/* 购物卡 */}
                    {shoppings.map((Item,indexedDB)=>{
                        return <ShoppingCare key={indexedDB} shopping={Item}/>
                    })}
                </ul>
                <div className="text-right pr-12 mt-8">
                    <div className="text-lg mr-8 inline-block"><span className="text-base">总价：</span>{allPrice.toFixed(2)}</div>
                    <span className="w-24 h-12 bg-green-400 inline-block text-center py-2 text-lg text-white">立即购买</span>
                </div>
            </div>
        </main>
    )
})

export default ShoppingCar